<template>
  <view>
    <text class="child-title">子组件B</text>
    <view class="content">
      <text>子组件A传值：</text>
      <text class="blue-bg">{{ fromAValue || '无' }}</text>
    </view>
    <view class="input-group">
      <text>回传值：</text>
      <input 
        type="text" 
        v-model="backValue" 
        class="input" 
        placeholder="输入回传内容"
      />
      <button @click="emitBack">回传</button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    fromAValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      backValue: ''
    }
  },
  methods: {
    emitBack() {
      // 回传值给父组件
      this.$emit('callBack', this.backValue)
    }
  }
}
</script>

<style scoped>
.child-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
  color: #333;
}

.content {
  font-size: 24rpx;
  margin: 15rpx 0;
}

.blue-bg {
  background: blue;
  color: white;
  padding: 0 10rpx;
  margin: 0 5rpx;
}

.input-group {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-top: 15rpx;
}

.input {
  flex: 1;
  height: 60rpx;
  padding: 0 10rpx;
  background: #cccccc;
  border: 1px solid #aaa;
  font-size: 24rpx;
}

button {
  background: #00cc66;
  color: white;
  border-radius: 4rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 24rpx;
  padding: 0 20rpx;
}
</style>